<!--
 * @description  : 证件-选择便利店
 * @descriptionDetail: 证件-选择便利店
 * @copyright    : 浙江烟草
 * @author       : zhaowb
 * @create       : 2022-07-09 18:43:02
-->
<template>
  <view class="page">
	<theme-navbar
	  :is-white="false" backText="返回" :title="navTitle" :custom-back="goBack">
	</theme-navbar>

  <view>
    <u-search
        class="search-space"
        shape="round"
        :clearabled="true"
        :showAction="true"
        actionText="确定"
        :animation="true"
        placeholder="品牌标识、企业名称"
        v-model="searchData.keyWord"
        @custom="handlerSearch"
    ></u-search>
  </view>

	<view class="content-list" style="padding-bottom: 160rpx;">
	  <me-table :i="0" :top="0" :index="0" :load-data="loadData" :init-load="false" ref="mescrollItem0">
		<view class="re-list" slot-scope="d" @click="handleRetailerClick(d.data)">
		  <view class="re-content">
			<view class="re-manager">
			  <text class="re-title">
          品牌标识:{{ d.data.storeMark }}
			  </text>
			  <u-tag style="flex-shrink: 0; height: fit-content" v-if="d.data.licStatus"
				mode="dark" shape="circle" :text="d.data.licStatusName"></u-tag>
			  <text class="re-tit"></text>
			</view>
			<view class="re-subtitle">
        企业名称:{{ d.data.storeName }}
			</view>
			<view class="re-icon">
        <view class="re-subtitle">
        门店总数:{{ d.data.storesTotal }}
        </view>
			</view>
			
			<view v-if="selectArr.find(item => item.storeUuid == d.data.storeUuid)" class="check-icon">
				<u-icon name="checkbox-mark" :color="$theme.u_type_primary" size="38" style="margin-right: 10px;"></u-icon>
			</view>
		  </view>
		</view>
	  </me-table>
	</view>
	
	
	<!-- 底部按钮 -->
	<view class="submit-btns btn-other-cls">
		<u-button class="u-btn" type="primary" @click="handlerSure">
			确定
		</u-button>
	</view>
	
  </view>
</template>

<script>
import MeTable from '@/components/me-table.vue';
import MescrollMoreMixin from '@/components/mescroll-uni/mixins/mescroll-more.js';
import queryService from '@/service/certificate/rlic.service';

export default {
	components: {
	  MeTable,
	},
	mixins: [MescrollMoreMixin],
    data() {
     return {
			tels: [],
			user: this.$storage.get(this.$rp.common.USER),
			selectArr: [], // 选中的便利店数据
			isMultiple: false, // 是否多选，默认单选
      searchData: {   // 查询参数
        keyWord: '',  // 模糊搜索关键字
        convenientStoreUuid: ""
      },
      routeParam:{},
        }
    },
	onLoad(option) {
    this.routeParam = this.getRouteParam()
		this.isMultiple = option.isMultiple && option.isMultiple == 1;
		this.searchData.convenientStoreUuid =  this.routeParam.convenientStoreUuid ;
	},
    methods: {
		handlerSearch() {
		  // if (this.$u.test.isEmpty(this.searchData.keyWord)) {
		  //   this.$u.toast('请输入关键字');
		  //   return;
		  // }
		  this.$refs['mescrollItem0'].refresh();
		},
		// 便利店列表数据查询
		loadData(page) {
      // let params = {
      //   page: page.num,
      //   limit: page.size,
      //   paras: {
      //     convenientStoreUuid: this.searchData.convenientStoreUuid,
      //     keyword: this.searchData.keyWord
      //   },
      // };
      let params = {
        page: page.num,
        limit: page.size,
        paras: {
          keyword: this.searchData.keyWord
        },
      };
		  return new Promise((resolve) => {
			queryService.brandList(params)
		        .then((res) => {
		          if (res.success) {
		            resolve({
		              count: res.count,
		              data: [...res.data,],
		            });
		          } else {
		            resolve({
		              count: 0,
		              data: [],
		            });
		          }
		        })
		        .catch((e) => {
		          resolve({
		            count: 0,
		            data: [],
		          });
		        });
		  });
		},
		handleRetailerClick(data) {
			if (!this.isMultiple) {
				this.selectArr = [data];
				return;
			}
			if (!!this.selectArr.find(item => item.storeUuid == data.storeUuid)) {
				this.selectArr = this.selectArr.filter(item => item.storeUuid != data.storeUuid);
			} else {
				this.selectArr.push(data);
			}
		},
		handlerSure() {
			if (!this.selectArr.length) {
				this.$u.toast("请选择便利店!");
				return;
			}
			this.backPrev({
				paramKey: 'selectBrand',
				param: this.selectArr,
			});
		}
    }
}
</script>

<style lang="scss" scoped>
@import 'style/certificate/common.scss';

.page {
  padding: 0;
}

.search-right-icon {
  display: flex;
  position: absolute;
  right: 10%;
}

.u-search-btn {
  height: 44px;
  line-height: 44px;
  // padding: 0 10px;
  display: flex;
  align-items: center;
  margin: 0 20rpx;

  .u-confirm-btn {
    height: 32px;
    margin-left: 10px;
  }
}

.content-list {
  background-color: #f3f4f5;
}

.nolicence-search-lay {
  background-color: #fff;
  position: fixed;
  // #ifndef H5-DINGDING
  top: 44px;
  // #endif
  // #ifdef H5-DINGDING
  top: 0px;
  // #endif
  z-index: 999;
  width: 100%;
  overflow: hidden;
  padding: $cm-search-padding-row $cm-search-padding-column;
}

.re-list {
	position: relative;
  margin: 20rpx;
  color: #666666;
  font-size: 15px;
  border-bottom: 1px solid #e9e9e9;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  -webkit-flex-direction: row;
  background-color: #fff;
  border-radius: 12px;
  padding: 12px;
}

.re-media {
  padding-right: 10px;
  vertical-align: middle;
}

.re-content {
  width: 100%;

  .re-manager {
    display: flex;
    justify-content: space-between;

    .re-title {
      width: calc(90%);
      font-size: 15px;
      color: #666;
      font-weight: 600;
      margin-bottom: 5px;
      width: 80%;
    }
  }

  .re-subtitle {
    padding-top: 5px;
    color: #666;
  }

  .re-icon {
    display: flex;
    padding-top: 10px;
  }
}

.check-icon {
	position: absolute;
	right: 30rpx;
	top: 100rpx;
}

/deep/.u-line {
  flex-shrink: 0;
}
</style>